<!--
 * 我的
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <page-root class="page-root" headerMode="" headerScrollMode="">
        <view class="app-gap-sides page-content">
            <view class="title">我的页面</view>
            <hi-button text="显示全局通知" theme="primary" round block @click="handleShowGlobalNotice"></hi-button>
            <hi-button text="显示全局弹窗" theme="success" round block @click="handleShowGlobalPopup"></hi-button>
            <hi-button class="logout-button" text="退出登录" @click="handleLogout" theme="error" round block></hi-button>
        </view>
    </page-root>
</template>

<script setup>
    import { ref, computed } from "vue";
    import { onLoad, onShow, onReady, onReachBottom, onPullDownRefresh, onShareAppMessage, onShareTimeline, onPageScroll } from "@dcloudio/uni-app";
    import { useUserStore } from "@/stores";

    // stores
    const userStore = useUserStore();

    // 页面滚动，不建议删除，因为 <page-root> 组件中如果需要处理滚动相关的逻辑，就需要在页面中定义，否则 <page-root> 中的 onPageScroll 生命周期不生效
    onPageScroll((e) => {});

    // 显示全局通知
    function handleShowGlobalNotice() {
        uni.$emit("showGlobalNoticeBar");
    }

    // 显示全局弹窗
    function handleShowGlobalPopup() {
        uni.$emit("showGlobalPopup");
    }

    // 退出登录按钮点击事件
    function handleLogout() {
        // 提示一下
        uni.showModal({
            title: "提示",
            content: "确认退出登录？",
            showCancel: true,
            success: ({ confirm, cancel }) => {
                if (confirm) confirmLogout();
            }
        });
    }

    // 确认退出登录
    function confirmLogout() {
        userStore.clear();
        uni.$hiRouter.refresh();
    }
</script>

<style lang="scss" scoped>
    .title {
        font-size: 30rpx;
        font-weight: 700;
        margin-bottom: 50px;
        text-align: center;
        margin-top: 50px;
    }

    .page-content {
        --hi-button-margin: 25px 0;
    }
</style>
